<template>
  <el-dialog :visible.sync="dialogVisible" title="关联采购成本" width="1400px" :close-on-click-modal="false"
    :modal-append-to-body="false" v-drag2anywhere>
    <div class="title">销售订单明细</div>
    <el-table :data="detailList" border>
      <el-table-column label="产品SN" prop="sn" width="120px" align="center"></el-table-column>
      <el-table-column label="订单渠道" prop="platform" width="120px" show-overflow-tooltip
        align="center"></el-table-column>
      <el-table-column label="商品名称" prop="title"></el-table-column>
      <el-table-column label="规格型号" prop="model" align="center" width="150px" show-overflow-tooltip></el-table-column>
      <el-table-column label="计量单位" prop="unit" align="center" width="80px" show-overflow-tooltip></el-table-column>
      <el-table-column label="数量" prop="count" align="center" width="80px" show-overflow-tooltip></el-table-column>
      <el-table-column label="单价" prop="price" align="center" width="80px" show-overflow-tooltip></el-table-column>
      <el-table-column label="总价" prop="total" align="center" width="80px" show-overflow-tooltip></el-table-column>
      <el-table-column label="合作商" prop="supname"></el-table-column>
    </el-table>


    <div class="title" style="margin-top: 20px;">已关联采购成本</div>
    <div>
      <div style="margin-bottom: 5px;text-align: right;"><el-button type="primary" size="mini"
          @click="handleShowFilterUI">添加采购成本</el-button></div>
      <el-table border :data="bindList" height="200px" empty-text="暂未关联任何成本">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="seller" label="销售单位" show-overflow-tooltip></el-table-column>
        <el-table-column prop="title" label="采购商品名称" width="150px" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column prop="model" label="规格型号" width="100px" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="brand" label="品牌" align="left" width="80px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="unit" label="单位" width="80px" align="center"></el-table-column>
        <el-table-column prop="count" label="数量" width="90px" align="center"></el-table-column>
        <el-table-column prop="total" label="小计" align="center" width="100px"></el-table-column>
        <el-table-column prop="buycode" label="采购单号" align="center" width="120px"></el-table-column>
        <el-table-column prop="tickettype" label="发票类型" align="center" width="120px">
          <template v-slot="scope">
            {{scope.row.tickettype}}
          </template>
        </el-table-column>
        <el-table-column prop="buyer" label="购方单位" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" align="center" width="100px">
          <template v-slot="scope">
            <el-button type="danger" circle icon="el-icon-delete"
              @click="handleDeleteBindItem(scope.$index,scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="height: 35px;line-height: 35px; border: 1px solid #eee;text-align: right;">
        <span style="margin-right:30px;">总数量:{{parseFloat(sum_count).toFixed(2)}}</span>
        <span>总金额:{{parseFloat(sum_rmb).toFixed(2)}}</span>
      </div>
    </div>
    <el-form>
    <el-row>
      <el-col :span="8">
        <div class="title" style="margin-top: 20px;">成本状态</div>
          <el-form-item label="成本状态">
            <el-select v-model="formData.bind_buystatus">
              <el-option label="不完整" value="0"></el-option>
              <el-option label="完整" value="1"></el-option>
            </el-select>
          </el-form-item>
      </el-col>
        <el-col :span="16">
              <div class="title" style="margin-top: 20px;">绑定备注</div>
            <el-form-item label="" label-width="0">
              <el-input type="textarea" v-model="formData.bind_buymemo" :rows="3" placeholder="绑定备注信息"></el-input>
            </el-form-item>
        </el-col>
    </el-row>
     </el-form>

    <BuyDetailFilterUI v-if="filterVisible" ref="buydetailFilterUI" @comfirm="handleFilteSelectCallback">
    </BuyDetailFilterUI>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
      <el-button type="primary" size="medium" @click="handleSave">保存</el-button>
    </div>

  </el-dialog>
</template>

<script>
  import BuyDetailFilterUI from './BuyDetailFilterUI.vue';
  export default {
    components: {
      BuyDetailFilterUI
    },
    data() {
      return {
        index: -1,
        formData: {
          sn: '',
          title: '',
          model: '',
          brand: '',
          count: 0,
          price: 0,
          supname: '',
          bind_buystatus: "1"
        },
        sum_count: 0,
        sum_rmb: 0,
        bindList: [],
        detailList: [],
        dialogVisible: false,
        filterVisible: false
      }
    },
    methods: {
      initData(index, data) {
        this.index = index;
        this.formData = data;
        this.bindList = [];
        this.detailList = [data];
        this.loadCostBindList();
      },
      loadCostBindList() {
        const params = {
          orderdid: this.formData.did
        }
        this.axios.post("api/admin/orderdetail/get_buybind", params).then(res => {
          if (res.status==200 && res.data.code) {
            this.bindList = res.data.list;
            this.handleFreshBottom();
          }
        })
      },
      handleDeleteBindItem(index, data) {
        this.bindList.splice(index, 1);
        this.handleFreshBottom();
      },
      handleFreshBottom() {
        this.sum_count = 0;
        this.sum_rmb = 0;
        this.bindList.forEach((item) => {
          console.log(item);
          this.sum_count += parseFloat(item.count);
          this.sum_rmb += parseFloat(item.total)
        })
      },
      handleShowFilterUI() {
        this.filterVisible = true;
        this.$nextTick(() => {
          this.$refs.buydetailFilterUI.dialogVisible = true;
          this.$refs.buydetailFilterUI.initData(this.formData.supname);
        })
      },
      handleFilteSelectCallback(list) {
        list.forEach((item) => {
          this.bindList.push(item);
        })
        this.handleFreshBottom();
      },
      handleSave() {
        const params = {
          ouid: this.formData.ouid,
          saledid: this.formData.did,
          ordercode: this.formData.ordercode,
          goods: this.bindList,
          ordercode: this.formData.ordercode,
          sum_count: this.sum_count,
          platform:this.formData.platform,
          bind_buysum: this.sum_rmb, //绑定总金额
          bind_buystatus: this.formData.bind_buystatus,
          bind_buymemo:this.formData.bind_buymemo
        }
        console.log(params, this.formData);
        this.axios.post("/api/admin/orderdetail/update_buybind", params).then(res => {
          if (res.data.code) {
            this.$message.success({
              message: res.data.msg,
              duration: 1500,
              showClosed: true
            });
            this.dialogVisible = false;
            this.$emit("complete", this.index, params);
          } else {
            this.$message.error({
              message: res.data.msg,
              duration: 1500,
              showClosed: true
            });
          }
        })

      }
    }
  }
</script>

<style>
</style>
